<template>
  <div class="content-box">
    <div ref="searchBox" class="search-box flex" v-show="showSearch">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="100px"
      >
        <el-form-item label="公司名称" prop="companyName">
          <el-input
            style="width: 240px; margin-right: 20px"
            v-model="queryParams.companyName"
            placeholder="全称或简称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="管理人" prop="manageUserIds">
          <el-select
            v-model="queryParams.manageUserIds"
            multiple
            collapse-tags
            clearable
            filterable
            placeholder="请选择管理人"
            style="width: 240px; margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in manageOptionList"
              :key="index"
              :label="item.userName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="queryParams.status"
            clearable
            filterable
            placeholder="请选择"
            style="width: 240px; margin-right: 20px"
          >
            <el-option
              v-for="(item, index) in statusOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="查询时间" prop="dateRange">
          <el-date-picker
            :style="{width: device === 'mobile'? '280px' :'355px', marginRight: '20px'}"
            clearable
            v-model="dateRange"
            type="datetimerange"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            plain
            >查询</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
          <el-button
            type="primary"
            size="mini"
            v-hasPermi="['business:upCompany:add']"
            @click="handelDialog('添加', null)"
            >添加公司</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <div class="table-box">
      <el-row :gutter="10" class="mb8">
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="handleQuery"
          :columns="columns"
        ></right-toolbar>
      </el-row>
      <el-table
        v-sticky-header
        ref="table"
        v-loading="loading"
        :data="dataList"
      >
        <template v-for="(item,index) in columns.slice(0, columns.length - 1)">
          <el-table-column
            :key="index"
            :label="item.label"
            :prop="item.prop"
            :width="getColumnWidth(index)"
            align="center"
            :fixed="item.fixed"
            :sortable="item.sortable ? item.sortable : false"
            :show-overflow-tooltip="item.showTooltip"
            v-if="item.visible"
          >
            <template slot-scope="scope">
              <!--账户余额单独处理 -->
              <div v-if="item.prop == 'surplusMoney'">
                  <span
                  :style="{color:scope.row[item.prop] >= 0?(scope.row[item.prop] !== 0 ? '#67C23A': '#606266'):'#F56C6C'}"
                  >{{ scope.row[item.prop] }}</span>
              </div>
              <!--启用状态单独处理 -->
              <div v-else-if="item.prop == 'status'">
                <el-popconfirm
                  :title="`确定重新${
                    !scope.row[item.prop] ? '启用' : '停用'
                  }吗？`"
                  @confirm="changeEnabledState(scope.row)"
                >
                  <el-button
                    slot="reference"
                    :type="scope.row[item.prop] ? 'success' : 'info'"
                    size="mini"
                    >{{ scope.row[item.prop] ? "启用" : "停用" }}</el-button
                  >
                </el-popconfirm>
              </div>
              <span v-else>
                {{ scope.row[item.prop] }}
              </span>
            </template>
          </el-table-column>
        </template>
        <el-table-column
          fixed="right"
          :prop="columns[columns.length - 1].prop"
          :label="columns[columns.length - 1].label"
          align="center"
          :width="getColumnWidth(columns.length - 1)"
          v-if="columns[columns.length - 1].visible"
        >
          <template slot-scope="scope">
            <div :class="['flex-center',device === 'mobile'?'flex':'']">
              <el-button
                type="text"
                v-hasPermi="['business:upCompany:query']"
                :style="{marginLeft: device === 'mobile'?'10px':'0px'}"
                @click="handelDialog('查看', scope.row)"
                >查看</el-button
               >
              <el-button
                type="text"
                v-hasPermi="['business:upCompany:edit']"
                @click="handelDialog('编辑', scope.row)"
                >编辑</el-button
              >
              <el-popconfirm
                title="确定要删除该公司吗？"
                style="margin-left: 10px"
                @cancel="hanCancelDel"
                @confirm="handelDel(scope.row)"
              >
                <el-button
                  slot="reference"
                  type="text"
                  v-hasPermi="['business:upCompany:remove']"
                  ><span style="color: #ff116e">删除</span></el-button
                >
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 使用分页插件 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page-sizes="[10, 50, 100, 200, 500]"
        :page.sync="queryParams.pageIndex"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 新增/编辑/查看 对话框 -->
    <el-dialog
      :title="title"
      width="800px"
      :visible.sync="dialogShow"
      :before-close="handleClose"
    >
      <el-form :model="form" :rules="rules" label-width="140px" ref="formRef">
        <el-form-item label="公司简称" prop="simpleName">
          <el-input
            v-model="form.simpleName"
            style="width: 100%"
            placeholder="请输入公司简称"
            clearable
            :disabled="viewsOptionState"
          />
        </el-form-item>
        <el-form-item label="公司全称" prop="companyName">
          <el-input
            v-model="form.companyName"
            style="width: 100%"
            placeholder="请输入公司全称"
            clearable
            :disabled="viewsOptionState"
          />
        </el-form-item>
        <el-form-item label="公司地址" prop="provinceOrcity">
          <div style="display: flex">
            <el-cascader
              ref="cascaderRef"
              filterable
              v-model="form.provinceOrcity"
              v-removeAriaHidden
              @change="cascaderChangeFun"
              :options="areaList"
              :props="{
                value: 'name',
                label: 'name',
                children: 'list',
                emitPath: true,
                checkStrictly: true,
              }"
              clearable
              :disabled="viewsOptionState"
              placeholder="请选择省市"
            ></el-cascader>
            <el-input
              v-model="form.detailedAddress"
              placeholder="请输入详细地址"
              clearable
              :disabled="viewsOptionState"
            />
          </div>
        </el-form-item>
        <el-form-item label="信用代码" prop="taxCode">
          <el-input
            v-model="form.taxCode"
            style="width: 100%"
            placeholder="请输入信用代码"
            clearable
            :disabled="viewsOptionState"
          />
        </el-form-item>
        <el-form-item label="开户银行" prop="bankName">
          <el-input
            v-model="form.bankName"
            style="width: 100%"
            placeholder="请输入开户银行"
            clearable
            :disabled="viewsOptionState"
          />
        </el-form-item>
        <el-form-item label="银行账号" prop="bankCode">
          <el-input
            v-model="form.bankCode"
            style="width: 100%"
            placeholder="请输入银行账号"
            clearable
            :disabled="viewsOptionState"
          />
        </el-form-item>
        <el-form-item label="联络人" prop="userName">
          <el-input
            v-model="form.userName"
            style="width: 100%"
            placeholder="请输入联络人"
            clearable
            :disabled="viewsOptionState"
          />
        </el-form-item>
        <el-form-item label="联络电话" prop="userPhone">
          <el-input
            v-model="form.userPhone"
            style="width: 100%"
            placeholder="请输入联络电话"
            clearable
            :disabled="viewsOptionState"
          />
        </el-form-item>
        <el-form-item label="联络邮箱" prop="userEmail">
          <el-input
            v-model="form.userEmail"
            style="width: 100%"
            placeholder="请输入联络邮箱"
            clearable
            :disabled="viewsOptionState"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input
            v-model="form.remarks"
            type="textarea"
            placeholder="请输入内容"
            :disabled="viewsOptionState"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="form.status"
            clearable
            filterable
            placeholder="请选择"
            style="width: 100%"
            :disabled="viewsOptionState"
          >
            <el-option
              v-for="(item, index) in statusOption"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="管理人" prop="manageUserId">
          <el-select
            v-model="form.manageUserId"
            clearable
            filterable
            placeholder="请选择管理人"
            style="width: 100%"
            :disabled="viewsOptionState"
          >
            <el-option
              v-for="(item, index) in manageOptionList"
              :key="index"
              :label="item.userName"
              :value="item.userId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="!viewsOptionState">
        <el-button type="primary" @click="handleSubmit('formRef')"
          >确 定</el-button
        >
        <el-button @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tableStickyMixins from "@/mixins/tableStickyMixins";
import { mapGetters } from "vuex";
import {
  listUpCompany,
  getUpCompanyById,
  addOrEditUpCompany,
  delUpCompany,
  onOrOff,
} from "@/api/business/upCompanyManagement";
import { querySysUserManageList } from "@/api/system/userManage";
import { getAreaCodeTreeList } from "@/api/system/areaCode";

export default {
  // 定义名字用于标识该组件是否被keep-alive缓存
  name: "UpCompanyManagement",
  data() {
    return {
      // 公司管理列表
      dataList: [],
      // 管理人筛选项
      manageOptionList: [],
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageIndex: 1,
        pageSize: 10,
      },
      // 时间范围
      dateRange: [],
      loading: false,
      // 表格列信息
      columns: [
        {label: `公司简称`,prop: "simpleName",visible: true,pcWidth: 160,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `公司全称`,prop: "companyName",visible: true,pcWidth: 180,mobileWidth: 110,fixed: null,showTooltip: true,},
        {label: `账户余额`,prop: "surplusMoney",visible: true,pcWidth: 160,mobileWidth: 100,fixed: null,showTooltip: true,sortable: true,},
        {label: `机构状态`,prop: "status",visible: true,pcWidth: 160,mobileWidth: 100,fixed: null,showTooltip: false,},
        {label: `在线产品数`,prop: "onNum",visible: true,pcWidth: 160,mobileWidth: 110,fixed: null,showTooltip: true,sortable: true,},
        {label: `下线产品数`,prop: "offNum",visible: true,pcWidth: 160,mobileWidth: 110,fixed: null,showTooltip: true,sortable: true,},
        {label: `停用产品数`,prop: "stopNum",visible: true,pcWidth: 160,mobileWidth: 110,fixed: null,showTooltip: false,sortable: true,},
        {label: `创建时间`,prop: "createTime",visible: true,pcWidth: 180,mobileWidth: 100,fixed: null,showTooltip: true,sortable: true,},
        {label: `产品管理员`,prop: "manageUserName",visible: true,pcWidth: 160,mobileWidth: 100,fixed: null,showTooltip: true,},
        {label: `操作`,prop: "operation",visible: true,pcWidth: 130,mobileWidth: 80,fixed: "right",showTooltip: true,},
      ],
      // 显示搜索栏
      showSearch: true,
      // 弹框标题
      title: "",
      // 弹框显示状态
      dialogShow: false,
      // 弹框的表单信息
      form: {
        // 默认状态启用
        status:1
      },
      // 弹框表单校验规则
      rules: {
        simpleName: [
          { required: true, message: "请填写公司简称", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "公司简称长度范围在 1 到 20 个字符之间",
            trigger: "blur",
          },
        ],
        companyName: [
          { required: true, message: "请填写公司全称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "公司全称长度范围在 1 到 50 个字符之间",
            trigger: "blur",
          },
        ],
        manageUserId: [
          { required: true, message: "请选择公司管理人", trigger: "change" },
        ],
      },
      // 全国省市区列表(树型结构)
      areaList: [],
      // 状态筛选项
      statusOption: [
        { label: "停用", value: 0 },
        { label: "启用", value: 1 },
      ],
    };
  },
  mixins: [tableStickyMixins],
  watch: {
    columns: {
      handler() {
        this.updateTableHeight();
      },
      deep: true,
    },
  },
  created() {
    this.init();
    this.getManageList();
  },
  computed: {
    ...mapGetters(["sidebar", "device"]),
    // 计算当前列元素在所处环境的宽度
    getColumnWidth() {
      return (index) => {
        return this.isMobile
          ? this.columns[index].mobileWidth
          : this?.sidebar?.opened
          ? this.columns[index].pcWidth - this.slightWidth
          : this.columns[index].pcWidth + 17;
      };
    },

    // (是否处于查看操作禁用表单项)
    viewsOptionState() {
      return this.title === "查看公司";
    },
  },
  methods: {
    // 级联筛选器改变事件
    cascaderChangeFun(){
      const cascader = this.$refs.cascaderRef;
      if (cascader) {
        if (cascader.handleClear) {
          cascader.handleClear(); // 清除 UI 上的输入和选中
        }
        // if (cascader.handleExpandChange) {
        //   cascader.handleExpandChange([]); // 重置展开路径，回到根节点
        // }
      }
      // 强制更新组件
      this.$forceUpdate();
    },
    // 获取全国省市区列表
    getProvinceCityList() {
      getAreaCodeTreeList().then((res) => {
        this.areaList = res?.data;
      });
    },
    // 获取管理人列表
    getManageList() {
      querySysUserManageList().then((res) => {
        this.manageOptionList = res?.data;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.$set(this.queryParams, "pageIndex", 1);
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // 完全重置到初始状态
      this.$set(this, "queryParams", {
        pageIndex: 1,
        pageSize: 10,
      });
      // 重置时间范围
      this.$set(this, "dateRange", []);
      this.init();
    },
    init() {
      this.getList();
      this.getProvinceCityList();
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      if (this.dateRange?.length) {
        this.queryParams.createTimeStart = this.dateRange[0];
        this.queryParams.createTimeEnd = this.dateRange[1];
      } else {
        delete this.queryParams.createTimeStart;
        delete this.queryParams.createTimeEnd;
      }
      listUpCompany(this.queryParams).then((response) => {
        // 解决id为number类型精度丢失问题
        this.dataList = response?.data?.list.map((row) => {
          return {
            ...row,
            id: row.id.toString(),
          };
        });
        this.total = response?.data?.total;
        this.loading = false;
      }).catch((err) => {
        setTimeout(() => {// 延迟2s后自动取消加载状态
          this.loading = false;
        }, 2000);
      })
    },
    // 获取公司详情
    getUpCompanyDetail(companyId) {
      getUpCompanyById(companyId).then((response) => {
        // 对公司地址回显单独处理
        this.form = response.data;
        // 不为空字符时操作
        if (response?.data?.companyAddr) {
          let [province, city, detailedAddress] =
            response?.data?.companyAddr?.split("-");
          this.$set(
            this.form,
            "provinceOrcity",
            city !== "undefined" ? [province, city] : [province]
          );
          this.$set(this.form, "detailedAddress", detailedAddress);
        }
      });
    },
    // 启用/停用状态切换触发回调
    changeEnabledState(row) {
      const params = {
        id: row?.id,
        status: row?.status ? 0 : 1,
      };
      onOrOff(params).then((res) => {
        if (res.code === 200) {
          this.$message.success("操作成功");
          this.getList();
        }
      });
    },

    // 修改表格高度触发回调
    updateTableHeight() {
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
    },
    // 处理对话框
    handelDialog(title, row = null) {
      this.title = title + "公司";
      switch (title) {
        case "查看":
          // 获取公司详细信息回显数据
          this.getUpCompanyDetail(row?.id);
          break;
        case "添加":
          break;
        case "编辑":
          // 获取公司详细信息回显数据
          this.getUpCompanyDetail(row?.id);
          break;
        default:
        // 其他操作
      }
      this.dialogShow = true;
    },
    /*关闭弹窗*/
    handleClose() {
      this.$refs["formRef"].resetFields();
      this.form = this.$options.data().form;
      this.dialogShow = false;
    },
    // 取消删除
    hanCancelDel() {
      this.$message({
        type: "info",
        message: "已取消删除操作",
      });
    },
    // 删除列表项
    handelDel(row) {
      delUpCompany(row?.id).then((res) => {
        if (res.code === 200) {
          this.$message.success("删除成功");
          this.getList();
        }
      });
    },
    // 刷新数据且关闭弹框
    handleRefresh() {
      // 刷新数据
      this.getList();
      // 关闭弹窗
      this.handleClose();
    },
    /*提交操作*/
    handleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = {};
          params = JSON.parse(JSON.stringify(this.form));
          console.log(params);

          // 公司地址单独处理
          if (this.form?.provinceOrcity || this.form?.detailedAddress) {
            let [province, city] = this.form?.provinceOrcity;
            params.companyAddr = `${province}-${city}-${this.form?.detailedAddress}`;
          }
          // 判断当前所处操作
          switch (this.title) {
            case "添加公司":
              // 添加操作
              console.log("添加", params);
              addOrEditUpCompany(params).then((res) => {
                if (res.code === 200) {
                  this.$message.success("添加成功");
                  this.handleRefresh();
                }
              });
              break;
            case "编辑公司":
              // 编辑操作
              console.log("编辑", params);
              addOrEditUpCompany(params).then((res) => {
                if (res.code === 200) {
                  this.$message.success("编辑成功");
                  this.handleRefresh();
                }
              });
              break;
            default:
            // 其他操作
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  font-size: 20px;
  color: #333333;
  font-weight: 500;
}
.search-box {
  margin: 0 0 20px;
  padding: 20px 20px 0;
  background: #fff;
  align-items: flex-start;
  border-radius: 6px;
}
.search-area {
  position: absolute;
  right: 20px;
}
.el-form-item__content {
  flex: 1;
  line-height: 40px;
  position: relative;
  font-size: 14px;
  min-width: 0;
}
::v-deep .el-dialog__body {
  border-top: 1px solid #dfe6ec;
  border-bottom: 1px solid #dfe6ec;
}
.el-table {
  // 滚动条加粗
  --scrollbar-height: 9px;
}
</style>
